<template>
  <div>
    <van-nav-bar title="商品列表" />
    <div class="box">
      <ul>
        <li
          v-for="item in listDatas.data"
          :key="item.id"
          @click="detail(item.goods_id)"
        >
          <img :src="item.thumb_url" alt="" />
          <div class="word">{{ item.goods_name }}</div>
          <div class="price">
            <span>￥{{ item.price }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import request from '../utils/request'
export default {
  data () {
    return {
      obj: {
        page: 1,
        pagesize: 20
      },
      listDatas: []
    }
  },
  created () {
    this.getGoodsList()
  },
  methods: {
    getGoodsList () {
      request
        .get('shoplist', { params: this.obj })
        .then((res) => {
          // console.log(res)
          // const { data } = res
          this.listDatas = res.data // 将请求回来的数据赋值给 listDatas
          // console.log(this.listDatas)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    detail (goodsId) {
      request
        .get('getshopinfo', { params: { id: goodsId } })
        .then((res) => {
          this.$router.push({
            path: '/mother/goods',
            query: { goodsData: JSON.stringify(res.data) }
          }) // 跳转+传参
          console.log(res.data)
        })
        .catch((err) => {
          console.log(err)
        })
    }
    // console.log(this.$refs.info)
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.van-nav-bar {
  width: 100%;
  border-bottom: 1px solid grey;
  position: fixed;
  top: 0;
}
.box{
  width: 375px;
  height: 1000px;;
  padding-bottom: 50px;;
}
ul {
  margin-top: 50px;
  height: 100%;
}
li {
  width: 172px;
  height: 172px;
  margin-left: 10px;
  margin-top: 10px;
  float: left;
}
img {
  width: 100px;
  height: 100px;
  margin-left: 33px;
}
.word {
  font-size: 16px;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.price {
  font-size: 16px;
  color: orange;
  text-align: center;
}
</style>
